<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		.sty{
			width:300px;
			height:200px;
			border:2px solid;
			margin:20px 0px;
		}	
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//获取节点
				var div1 = document.getElementById("div1");
				var inp = document.getElementById("inp");
				//console.log(inp);//检测节点是否被获取
				/////鼠标移入事件
				div1.onmouseover = function(){
					div1.style.background = "red";
				}
				/////鼠标移出事件
				div1.onmouseout = function(){
					div1.style.background = "greenyellow";
				}
				/////鼠标的点击事件
				div1.onclick = function(){
					div1.style.width = "400px";
					div1.style.height = "400px";
				}
				/////键盘按下事件
//				inp.onkeydown = function (event){
//					console.log(event.keyCode);
//					if(event.keyCode == 13){
//						console.log("你按得是enter键");
//					}
//					console.log("正在输入……");
//				}
				/////键盘松开事件
//				inp.onkeyup = function (){
//					console.log("完成");
//				}
				
				//////域的内容发生改变
//				inp.onchange = function(){
//					inp.value = inp.value + "大坏蛋";
//				}
				
				//二、window常用的方法
				prompt("prompt框");//有提示，还可以输入，有确定和取消按钮，确定按钮存储输入的内容，点击取消按钮存储null
//				var p = prompt("prompt框");
//				console.log(p);
//				var a = alert("alert框");
//				console.log(a);
				alert("alert框");//有提示，有确定按钮，点击确定按钮无存储输入的内容
				confirm("confirm框");//有提示，有确定和取消按钮，点击确定按钮存储true，点击取消按钮存储false
				var c = confirm("confirm框");
			//获取节点的方法	
			var U2 = document.getElementById("U2");	
			var up = U2.getElementsByTagName("p");
			console.log(up);
			}//end 加载函数
		</script>
	</head>
	<body>
		<!--
        	一.window常用事件
        	需求1. 鼠标移入div div的背景为红色 移除背景色为绿色点击时div变大
        -->
        <div id="div1" class="sty"></div>
        <!--
        	需求2. 按下快键 打印提示
        -->
        <input type="text" id="inp" value= "啦啦啦啦">
        <a href="http://www.baidu.com" onclick =" javascript:return confirm('你确定要跳转吗？');">百度一下</a>
	    <button id="btn">打开新的窗口</button>
	    <ul id="U2">
	    	<li>41111</li>
	    	<li>
	    		22222
	    		<p>2里面的p</p>
	    	</li>
	    	<p>ul的子标签p</p>
	    </ul>	
	    	<p>ul的外面的p1</p>
	    	<p>ul的外面的p1</p>
	    
	</body>
</html>
